<template>
  <div class="wrap">
    <!-- 头部搜索 轮播 -->
    <header class="header" style="position: relative">
      <van-nav-bar title="妙手商场" />
      <div class="search" @click="$router.push('/shopss')">
        <input
          type="text"
          placeholder="搜索药品"
          style="
            width: 600px;
            height: 60px;
            border-radius: 26px;
            border: 3px solid red;
            margin-left: 10%;
          "
        />
      </div>
      <button
        style="
          width: 100px;
          height: 50px;
          background-color: red;
          border: none;
          color: white;
          border-radius: 20px;
          position: absolute;
          top: 97px;
          right: 80px;
        "
      >
        搜索
      </button>
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image" s>
          <img
            :src="image"
            style="width: 100%; height: 300px; border-radius: 35px; padding: 10px"
          />
        </van-swipe-item>
      </van-swipe>
      <div
        style="
          display: flex;
          justify-content: space-around;
          margin-top: 20px;
          background-color: #fcf5e3;
          border-radius: 20px;
        "
      >
        <p style="color: #81542b">
          <span><van-icon name="diamond-o" /></span>正品保障
        </p>
        <p style="color: #999">|</p>
        <p style="color: #81542b">
          <span><van-icon name="diamond-o" /></span>隐私发货
        </p>
        <p style="color: #999">|</p>
        <p style="color: #81542b">
          <span><van-icon name="diamond-o" /></span>专业药师
        </p>
        <p style="color: #999">|</p>
        <p style="color: #81542b">
          <span><van-icon name="diamond-o" /></span>官网直供
        </p>
      </div>
    </header>
    <!-- 中间宫格轮播 -->
    <main>
      <div class="grid">
        <van-swipe class="my-swipe" indicator-color="white">
          <van-swipe-item>
            <div class="grid-item">
              <dl>
                <dt>
                  <img src="../../img/延时_03.png" alt="" />
                </dt>
                <dd>延时持久</dd>
              </dl>
              <dl>
                <dt>
                  <img src="../../assets/shopimg/2222_03.png" alt="" />
                </dt>
                <dd>止脱生发</dd>
              </dl>
              <dl>
                <dt>
                  <img src="../../assets/shopimg/3333_03.png" alt="" />
                </dt>
                <dd>妇科炎症</dd>
              </dl>
              <dl>
                <dt>
                  <img src="../../assets/shopimg/4444_03.png" alt="" />
                </dt>
                <dd>平稳降压</dd>
              </dl>
              <dl>
                <dt>
                  <img src="..//../assets/shopimg/5555_03.png" alt="" />
                </dt>
                <dd>温控血糖</dd>
              </dl>
              <dl>
                <dt>
                  <img src="../../assets/shopimg/6666_07.png" alt="" />
                </dt>
                <dd>延时持久</dd>
              </dl>
              <dl>
                <dt>
                  <img src="../../img/延时_03.png" alt="" />
                </dt>
                <dd>延时持久</dd>
              </dl>
              <dl>
                <dt>
                  <img src="..//../assets/shopimg/5555_03.png" alt="" />
                </dt>
                <dd>缓解风湿</dd>
              </dl>
              <dl>
                <dt>
                  <img src="../../img/延时_03.png" alt="" />
                </dt>
                <dd>远离哮喘</dd>
              </dl>
              <dl @click="$router.push('/fl')">
                <dt>
                  <img src="../../assets/shopimg/5555_03.png" alt="" />
                </dt>
                <dd>全部分类</dd>
              </dl>
            </div>
          </van-swipe-item>
          <van-swipe-item class="grid-item">
            <dl>
              <dt>
                <img src="../../assets/shopimg/w1_03.png" alt="" />
              </dt>
              <dd>大牌器械</dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/w2_03.png" alt="" />
              </dt>
              <dd>缓解胃胀</dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/w3_03.png" alt="" />
              </dt>
              <dd>滋补调养</dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/s4_03.png" alt="" />
              </dt>
              <dd>母婴常备</dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/w5_03.png" alt="" />
              </dt>
              <dd>壮阳补肾</dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/e1_07.png" alt="" />
              </dt>
              <dd>避孕专区</dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/e2_07.png" alt="" />
              </dt>
              <dd>滋润保湿</dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/e3_07.png" alt="" />
              </dt>
              <dd>营养充分</dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/e4_07.png" alt="" />
              </dt>
              <dd>消化不良</dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/e5_06.png" alt="" />
              </dt>
              <dd>花茶饮片</dd>
            </dl>
          </van-swipe-item>
        </van-swipe>
      </div>
    </main>
    <footer>
      <div>
        <h2 style="margin-left: 20px">
          品牌专区<span class="span1" style="float: right; margin-right: 20px">></span>
        </h2>
        <div class="box">
          <div class="one">
            <h2>华领医药</h2>
            <span style="width: 180px; height: 160px; background-color: antiquewhite">
              <img src="../../assets/shopimg/q1_03.png" alt="" style="margin-left: 3px"
            /></span>
          </div>
          <div class="one">
            <h2>蓝素</h2>
            <span
              ><img src="../../assets/shopimg/q2_05.png" alt="" style="margin-left: 3px"
            /></span>
          </div>
          <div class="one">
            <h2>万全药业</h2>
            <span
              ><img src="../../assets/shopimg/q3_03.png" alt="" style="margin-left: 3px"
            /></span>
          </div>
          <div class="one">
            <h2>同仁堂</h2>
            <span
              ><img src="../../assets/shopimg/q4_03.png" alt="" style="margin-left: 3px"
            /></span>
          </div>
        </div>
      </div>
    </footer>

    <div>
      <van-tabs v-model:active="active" @change="hanldeChange" title-active-color="#f60">
        <van-tab v-for="(item,index) in tablist" :key="index" :title="item.title" change>
        </van-tab>
      </van-tabs>
      <div class="goodslist">
            <div class="goods" v-for="(item,index) in tabgoods" :key="index" @click="todetail(item.id)">
              <div class="img">
                <img :src="item.imgs[0]" alt="">
              </div>
              <div class="msg">
                <div class="title">
                  {{ item.title }}
                </div>
                <div class="price">
                  ￥{{ item.price }}
                </div>
              </div>
            </div>
          </div>
    </div>
  </div>
</template>

<script lang="ts" setup> 
import { onMounted,ref } from 'vue';
import axios from 'axios'
import router from '@/router';
const goodslist = ref<any[]>([]);
const tabgoods=ref<any[]>([]);
const tablist = ref<any[]>([
    {
      "id": 1,
      "title": "健康热销"
    },
    {
      "id": 2,
      "title": "男性健康"
    },
    {
      "id": 3,
      "title": "女性养护"
    },
    {
      "id": 4,
      "title": "家庭常备"
    },
    {
      "id": 5,
      "title": "风湿骨痛"
    },
    {
      "id": 6,
      "title": "皮肤用药"
    },
    {
      "id": 7,
      "title": "营养保健"
    }
  ]);
  const active = ref(0);
  const ctab = () => {
    console.log(active.value);

  } 
const images = [
  'https://img0.baidu.com/it/u=2931243091,718249849&fm=253&fmt=auto&app=120&f=JPEG?w=569&h=427',
  'https://img0.baidu.com/it/u=904623622,17335413&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
  'https://img1.baidu.com/it/u=1854147766,908152369&fm=253&fmt=auto&app=138&f=JPEG?w=1422&h=800',
]
const hanldeChange = (index: number) => {
  console.log(index)
  // goodslist.value=
}
const getshoplist = async () => {
  const res = await axios.get(`/api/shop`)
  console.log(res.data.data);
  goodslist.value = res.data.data
  console.log();
  tabgoods.value=goodslist.value.filter(item => item.tabid == 1)
  console.log(tabgoods.value);
  
}
const todetail=(id:number)=>{
  router.push({path:'/shopdetail',query:{id:id}})

}
// todetail()
onMounted(()=>{
  getshoplist()
})
</script>
<style lang="scss" scoped>
.search{
    width: 100%;
    height: 60px;
    background-color: #fff;
    position: relative;
}
.grid{
    margin-top: 20px;
    /* width: 85%; */
    width: 100%;
    height: 140px;
    /* margin-left: 45px; */
}
.grid-item{
    width: 100%;
    height: 300px;
    display:flex;
    justify-content: space-around;
    flex-wrap: wrap;

}

main {
    width: 100%;
}

.my-swipe {
    width: 100%;
}

.my-swipe van-swipe-item {
    width: 100%;
}
.grid-item dl{
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.grid-item img{
    width: 100px;
    height: 100px;
    border: 50%;
}
.grid{
    width: 100%;
    height: 360px;
}
.box{
    width: 100%;
    height: 200px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-around;
}

.one{
    width: 160px;
    height:200px;
    margin-top: 10px;
    background-color: #fd5940;
    color: #fff;   
}

.one h2 {
    width: 100%;
    text-align: center;
}

.goodslist{
    column-count: 2;
}
.goods{
    width: 90%;
    height: 600px;
    margin-left: 5%;
    background: #fff;
    margin-top: 20px;
    .img{
        height: 450px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .title{
        width: 90%;
        margin-left: 2.5%;
        font-size: 25px;
        font-weight: 500;
        height: 70px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 显示的行数 */
        overflow: hidden;
    }
    .price{
        margin-top: 20px;
        font-size: 25px;
        color: #f60;
    }
}

:root {
  --van-primary-color: red;
}
:root:root {
--van-tabs-bottom-bar-height:3px
--van-tabs-bottom-bar-width:40px
--van-tabs-bottom-bar-color:var(--van-primary-color)
}

</style>
